<script setup lang="ts">
import sha1 from 'sha1';
import dayjs from 'dayjs';
import { fileNameForUploadFile, uploadImageFile } from '/@/utils/file';
import { onMounted, reactive } from 'vue';
import { navigateTo } from '@tarojs/taro';
import { Uploader as NutIconUploader, Close as NutIconClose } from '@nutui/icons-vue-taro';
import { getSysImgUrl } from '/@/utils/index';
import { appEvents } from '/@/utils/events';

const props = withDefaults(
  defineProps<{
    /**
     * 图片高度
     */
    height?: string;
    /**
     * 前面页面路径
     */
    signPage?: string;
    /**
     * 事件名称
     */
    event?: string;
    /**
     * 业务模块名称
     */
    module?: string;
    /**
     * 是否只读
     */
    readonly?: boolean;
    /**
     * 签名图片
     */
    defaultImageUrl?: string;
  }>(),
  {
    height: '90px',
    signPage: '',
    event: '',
    module: 'other',
    readonly: false,
    defaultImageUrl: '',
  },
);

const state = reactive<{
  /**
   * 签名图片
   */
  imageUrl: { key: string; src: string } | null;
}>({
  imageUrl: null,
});

const emits = defineEmits<{
  (e: 'onChange', signatureImage: { key: string; src: string } | null): void;
}>();

/**
 * 跳转到签名页面
 */
function jumpToSignaturePage() {
  if (props.readonly) {
    return;
  }
  //跳转到签名页面
  navigateTo({
    url: props.signPage,
  });
}

/**
 * 1.注册监听消息-签名图片返回的消息
 * 2.获取签名的base64编码url
 * 3.去掉'data:image/png;base64,'
 * 4.上传图片的base64编码内容
 */
function getSignUrlAndUpload() {
  appEvents.on(props.event, (signUrl) => {
    const newUrl = signUrl.value.replace('data:image/png;base64,', '');
    const suffix = '.jpg'; //文件名后缀
    const fileName = fileNameForUploadFile(suffix);
    uploadImageFile(
      '',
      fileName,
      fileName,
      props.module,
      (url: string) => {
        state.imageUrl = {
          key: sha1(`${dayjs().valueOf()}-${Math.random()}`) as string,
          src: url,
        };
        emits('onChange', state.imageUrl);
      },
      '2', //上传base64图片类型
      newUrl,
    );
  });
}
/**
 * 删除上传图片
 */
function deleteImage() {
  state.imageUrl = null;
  emits('onChange', state.imageUrl);
}

onMounted(() => {
  //注册监听消息-签名图片返回的消息
  getSignUrlAndUpload();
});
</script>

<template>
  <view class="app-upload-signature__wrapper">
    <!--当还没获取签名的时候 -->
    <view
      v-if="!state.imageUrl && !props.readonly"
      class="app-upload-signature__item-wrapper"
      :style="{ height: props.height }"
    >
      <view class="app-upload-signature__item">
        <view class="app-upload-signature__choose-image-btn" @click="jumpToSignaturePage()">
          <nut-icon-uploader />
        </view>
      </view>
    </view>
    <!--签名图片不为空 -->
    <view v-else class="app-upload-signature__item-wrapper" :style="{ height: props.height }">
      <view class="app-upload-signature__item" v-if="props.readonly">
        <image
          class="app-upload-signature__img"
          mode="aspectFill"
          :src="getSysImgUrl(props.defaultImageUrl)"
        />
      </view>
      <view class="app-upload-signature__item" v-else>
        <view class="app-upload-signature__item-del-btn" @click="deleteImage">
          <nut-icon-close size="10px" />
        </view>
        <image
          class="app-upload-signature__img"
          mode="aspectFill"
          :src="getSysImgUrl(state.imageUrl?.src || '')"
        />
      </view>
    </view>
  </view>
</template>

<style lang="scss">
@import './index.scss';
</style>
